<template>
  <div class="app-container">
    <el-drawer :title="title" :visible.sync="openDetail" size="80%" @close="cancel" :append-to-body="true"
      class="demo-drawer">
      <template v-slot:title>
        <span class="titleDiv">{{ title }}</span>
      </template>
      <div style="padding: 0 20px">
        <div>
          <el-form ref="requisitionForm" :model="requisitionForm" label-width="100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="工单编号" prop="workorderCode">
                  <el-input v-model="requisitionForm.workorderCode" placeholder="请输入工单编号" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="工单数量" prop="quantity">
                  <el-input v-model="requisitionForm.quantity" placeholder="请输入生产数量" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="批次号" prop="batchCode">
                  <el-input v-model="requisitionForm.batchCode" placeholder="请输入批次号" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="产品编号" prop="productCode">
                  <el-input v-model="requisitionForm.productCode" placeholder="请选择产品" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品名称" prop="productName">
                  <el-input v-model="requisitionForm.productName" placeholder="请选择产品" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="规格型号" prop="productSpc">
                  <el-input v-model="requisitionForm.productSpc" placeholder="请选择产品" disabled />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="成品入库数量" prop="reportQuantity">
                  <el-input v-model="requisitionForm.reportQuantity" placeholder="请输入成品入库数量" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="技术分解单号" prop="breakdownNumber">
                  <el-input v-model="requisitionForm.breakdownNumber" placeholder="请输入技术分解单号" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="SN码" prop="snList">
                  <div>
                    <div>
                      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                        @change="handleCheckAllChange">全选</el-checkbox>
                    </div>
                    <el-checkbox-group v-model="snList" @change="handleCheckedCitiesChange">
                      <!-- edit begin by zyj 2024/11/18  生产汇报单显示修改之后的sn码   -->
                      <!-- <el-checkbox
                        v-for="item in workorderSnList"
                        :label="item.snCode"
                        :key="item.snCode"
                        :disabled="item.isCheck =='1' ?true :false" 
                      >{{item.snCode}}</el-checkbox> -->
                      <span v-for="item in workorderSnList" :key="item.snCode">
                        <el-checkbox v-if="item.show || item.isCheck" :label="item.snCode" style="padding-right: 10px;"
                          :disabled="item.isCheck == '1' ? true : false">{{ item.snCode }}</el-checkbox>
                      </span>
                      <!-- edit end by zyj 2024/11/18  生产汇报单显示修改之后的sn码   -->
                    </el-checkbox-group>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="demo-drawer__footer">
            <el-button type="success" @click="handleProductQuantity" v-if="
              form.status == 4 &&
              requisitionForm.workorderId != null
            ">确定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getWorkorder, generateReport } from "@/api/mes/pro/workorder";
export default {
  data() {
    return {
      openDetail: false,
      title: "生产汇报单",
      // 表单参数
      form: {},
      requisitionForm: {
        snList: []
      },
      loading: false,
      routeproductbomList: [],
      productRequisitionData: {},
      workorderDataList: [],
      workorderSnList: [],
      snList: [],
      checkAll: false,
      isIndeterminate: false,
      checkAllLIst: [],
    };
  },
  methods: {
    //初始化函数
    init(row) {
      console.log(row, "子组件的row");
      this.form = row;
      //调接口需要的id
      this.workorderId = row.workorderId;
      this.openDetail = true;
      this.snList = [];
      this.checkAllLIst = []
      this.getList();
      this.checkAll = false;
    },
    getList() {
      this.loading = true;
      getWorkorder(this.form.workorderId).then(response => {
        this.requisitionForm = { ...response.data };
        console.log(this.requisitionFormm, "====== this.requisitionForm=====");
        let arr = [];
        if (response.workorderSnList) {
          arr = response.workorderSnList.filter(item => item.show && arr.filter(subitem => subitem.snCode == item.snCode).length == 0);

          arr.push(...response.workorderSnList.filter(item => item.isCheck));
        }
        this.workorderSnList = arr;
        let list = arr.filter(item => item.show && !item.isCheck).map(item => item.snCode)
        this.checkAllLIst = list
        // this.checkAllLIst = this.workorderSnList.filter(item=>{
        //   return item.isCheck !='1'
        // })

        console.log(this.checkAllLIst, "======this.checkAllLIst======");
        this.title = "生产汇报单";
        // this.$set(this.form, "routeName", routeName);
      });
    },
    // 取消按钮
    cancel() {
      this.openDetail = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.requisitionForm = {
        workorderId: null,
        workorderCode: null,
        workorderName: null,
        orderSource: null,
        sourceCode: null,
        productId: null,
        productCode: null,
        productName: null,
        productSpc: null,
        unitOfMeasure: null,
        quantity: null,
        quantityProduced: null,
        quantityChanged: null,
        quantityScheduled: null,
        clientId: null,
        clientCode: null,
        clientName: null,
        requestDate: null,
        parentId: null,
        status: 0,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        orderType: null,
        fPlanStartDate: null,
        fPlanFinishDate: null,
        breakdownNumber: null
      };
      this.autoGenFlag = false;
      this.snList = [];
      this.resetForm("requisitionForm");
    },

    // 生成汇报单
    handleProductQuantity() {
      // workorderSnList
      let list = [];
      list = this.workorderSnList.filter(item => {
        console.log(item.snCode, this.snList.indexOf(item.snCode), "=========");
        return this.snList.indexOf(item.snCode) !== -1;
      });
      console.log(list, "=====list====");
      this.requisitionForm.reportSnList = this.snList;
      console.info(this.snList.length, "===requisitionForm====snList>", this.requisitionForm);
      if (this.snList.length != Number(this.requisitionForm.reportQuantity)) {
        return this.$modal.msgError("所选SN码数量必须等于成品入库数量！！！");
      }
      generateReport(this.requisitionForm).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.openDetail = false;
        this.reset();
        this.$emit("getList");
        // this.getList();
      });
    },
    handleCheckAllChange(val) {
      this.snList = val ? this.checkAllLIst : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.checkAllLIst.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.checkAllLIst.length;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container ::v-deep .el-drawer__header {
  padding-top: 10px !important;
  padding-bottom: 5px !important;
  margin-bottom: 10px !important;
}

.dialog-footer {
  padding-top: 10px;
  text-align: right;
}

.titleDiv {
  font-weight: 700 !important;
  font-size: 20px;
}
</style>
